
(function(window){

	function $(id){
		return document.getElementById(id);
	}

	function on(el, type, fn, that){
		if(el.addEventListener){
			el.addEventListener( type, function(e){fn.call(that,e)}, false);
		}else if(el.attachEvent){
			el.attachEvent('on'+type, function(e){fn.call(that,e)});
		}else{
			el['on'+type] = function(e){fn.call(that,e)};
		}
	}

	var input = $('tag'),
			left_in = $('left-in'),
			right_in = $('right-in'),
			left_out = $('left-out'),
			right_out = $('right-out'),
			wrap = $('wrap'),
			sort = $('sort'),
			tip = $('tip'),
			search = $('search'),
			searchValue = $('search-value');
			
	var chart = {
		num:[],
		text: '',
		regStr: new RegExp(/[\s\n\.\-。,，、]+/,'igm'),
		regStr1: new RegExp(/(^[\s\n\.\-。,，、]*)|([\s\n\.\-。,，、]*$)/,'igm'),
		_valiadation:function(){//验证并分割数据
			var temp = input.value.trim();
			if(temp){
				temp = temp.replace(this.regStr1,'').replace(this.regStr,'|').split('|');
				return temp;
			}
		},
		_count: function(){//检测是否队列已满
			if(this.num.length > 60){
				tip.innerHTML = '队列已满60，不能输入了';
				return true;
			}else{
				tip.innerHTML = '';
			}
		},
		_leftIn: function(){//左侧入
			
			if(this._valiadation()){
				if(this._count())return;
				
				for(var i = 0; i < this._valiadation().length; i++){
					this.num.unshift(this._valiadation()[this._valiadation().length - 1 -i]);
				}
				console.log(this.num);
				this._render();
			}
		},
		_rightIn: function(){//右侧入
			if(this._valiadation()){
				if(this._count())return;
				for(var i = 0; i < this._valiadation().length; i++){
					this.num.push(this._valiadation()[i]);
				}
				this._render();
			}
		},
		_leftOut: function(){//左侧出
			if(this._valiadation()){
				this.num.shift(this._valiadation());
				this._render();
				this._count();
			}
		},
		_rightOut: function(){//右侧出
			if(this._valiadation()){
				this.num.pop(this._valiadation());
				this._render();
				this._count();
			}
		},
		_render: function(){//渲染数据
			this.text = '';
			for(var i in this.num){
				this.text += '<span>' + this.num[i] + '</span>';
			
			}
			wrap.innerHTML = this.text;
		},
		_sort: function(){//排序
			this.num.sort(function(a, b){
				return a-b;
			});
			this._render();
		},
		_remove: function(e){//点击元素移除
				var ev = window.event || e;
				if(ev.target.nodeName.toLowerCase() === 'span'){
					this.num.splice(this.num.indexOf(+ev.target.style.height),1);
					this._render();
					this._count();
				}
			
			
		},
		_search: function(){
			if(searchValue.value.trim()){
				this.text = '';
				for(var i in this.num){
					console.log(searchValue.value.trim() == this.num[i]);
					if(searchValue.value.trim() == this.num[i]){
						this.text += '<span class="active">' + this.num[i] + '</span>';
					}else{
						this.text += '<span>' + this.num[i] + '</span>';
					}
					
				
				}
				wrap.innerHTML = this.text;
			}
		},
		bindEvent: function(){
			// console.log(this._leftIn());
			on(left_in, 'click', this._leftIn,this);
			on(right_in, 'click', this._rightIn,this);
			on(left_out, 'click', this._leftOut,this);
			on(right_out, 'click', this._rightOut,this);
			on(sort, 'click', this._sort,this);
			on(wrap, 'click', this._remove,this);
			on(search, 'click', this._search,this);
		},
		init: function(){
			this.bindEvent();
		}
	};
	window.chart = chart;
})(window);

chart.init();